<!-- FileItem.vue -->
<template>
    <view class="file-item">
        <!-- 进度遮罩层 -->
        <view v-if="uploadProgress !== undefined" class="progress-overlay">
            <progress class="progress-bar" :value="uploadProgress" max="100" />
            <text class="progress-text">{{ uploadProgress }}%</text>
        </view>

        <!-- 修改预览部分 -->
        <view v-if="isVideo(file)" class="media-wrapper" @click="handlePreview(file)">
            <image :src="file + '?vframe/jpg/offset/0'" class="media-content" mode="aspectFill" />
            <view class="play-wrapper">
                <image src="/static/icons/play.svg" class="play-icon" />
            </view>
        </view>
        <image v-else :src="file" mode="aspectFill" class="media-content" @click="handlePreview(file)" />

        <!-- 上传完成显示删除按钮 -->
        <image v-if="uploadProgress === undefined" src="/static/icons/close.svg" class="delete-icon"
            @click="handleDelete(index)" />
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { isVideo } from './utils';

const props = defineProps({
    file: String,
    index: Number,
    uploadProgress: Number,
    handlePreview: Function,
    handleDelete: Function
});
</script>

<style scoped>
/* 样式保持不变 */
</style>